<script setup lang="ts">
import { service } from '@/utils/request';
import { ElMessage } from 'element-plus';
import { ref, reactive, computed } from 'vue';
import { translateCode2Name } from "@/utils/constantsUtils";

const ruleFormRef = ref();
const queryForm = reactive({
    registId: ''
})
const registerForm = reactive({
    registId: 0,
    name: '',
    age: 0,
    gender: ''
})

//患者消费信息
const tableData = ref<any[]>([]);

//已勾选的 准备 缴费的 项目
const selectFeeItems = ref<any[]>([]);

const queryFormRule = {
    registId: [
        { required: true, message: '病历号不能为空', trigger: 'blur' }
    ]
}


//查询患者 信息  和 开立的项目（检查和检验）
function search() {
    ElMessage({
        message: "搜索的患者id：" + queryForm.registId,
        type: "success"
    })
    const url = '/guahao/initFeePage?registId=' + queryForm.registId
    service.get(url).then((result: any) => {


        const { register, checkApplyList, inspectApplyList } = result

        registerForm.registId = register.registId
        registerForm.name = register.name
        registerForm.age = register.age;
        registerForm.gender = translateCode2Name('Gender', register.gender);


        tableData.value = [];

        checkApplyList.forEach((checkApply: any) => {


            tableData.value.push({
                itemId: checkApply.itemId,
                itemName: checkApply.name,
                price: checkApply.price,
                type: 'check',
                typeName: '检查',
                status: checkApply.status,
            })

        })

        inspectApplyList.forEach((inspectApply: any) => {

            tableData.value.push({
                itemId: inspectApply.itemId,
                itemName: inspectApply.name,
                price: inspectApply.price,
                type: 'inspect',
                typeName: '检验',
                status: inspectApply.status,
            })

            console.log("tableData.value", tableData.value);

        })

    })
}
const amount = computed(() => {

    let sum = 0;

    selectFeeItems.value.forEach(item => {

        sum += item.price

    })


    return sum;
})


//代收费项目是否可以 勾选  根据状态判断
function selectable(row: any) {
    return row.status == '1';
}


function selectFeeItem(items: any[]) {
    selectFeeItems.value = items;

    console.log("selectFeeItems.value ", selectFeeItems.value);

}


function fee() {

    let feeItemId = selectFeeItems.value.map(item => item.itemId)
    let feeItemType = selectFeeItems.value.map(item => item.type)

    service.get<boolean>('/guahao/fee', {
        params: {
            feeItemId: feeItemId,
            feeItemType: feeItemType,
        }
    }).then((success: boolean) => {
        if (success) {
            ElMessage({
                message: "收费成功",
                type: "success"
            })
            search();
        }
    })




}


</script>



<template>

    <el-tag type="success" size="large">
        患者信息查询
    </el-tag>

    <el-row>


        <el-col :span="6">


            <el-form :model="queryForm" :rules="queryFormRule" ref="ruleFormRef">
                <el-form-item label="病历号" prop="registId">
                    <el-input v-model="queryForm.registId" placeholder="请输入病历号"></el-input>
                </el-form-item>
            </el-form>


        </el-col>
        <el-col :span="3">
            <el-button type="primary" @click="search">搜索</el-button>
        </el-col>

    </el-row>


    <div>
        患者信息确认
    </div>
    <el-row>


        <el-col :span="24">

            <el-form v-model="registerForm" inline>
                <el-form-item label="患者姓名">
                    <el-input v-model="registerForm.name" readonly> </el-input>
                </el-form-item>
                <el-form-item label="患者年龄">
                    <el-input v-model="registerForm.age" readonly></el-input>
                </el-form-item>
                <el-form-item label="患者性别">
                    <el-input v-model="registerForm.gender" readonly></el-input>
                </el-form-item>
            </el-form>


        </el-col>


    </el-row>


    <el-table title="患者消费信息" width="100%" :data="tableData" @selection-change="selectFeeItem">
        <el-table-column type="selection" :selectable="selectable"></el-table-column>
        <el-table-column label=" 病历号">
            <template #default>
                {{ registerForm.registId }}
            </template>
        </el-table-column>
        <el-table-column label="患者姓名">
            <template #default>
                {{ registerForm.name }}
            </template>
        </el-table-column>
        <el-table-column label="项目名称" prop="itemName"></el-table-column>
        <el-table-column label="单价" prop="price"></el-table-column>
        <el-table-column label="项目类型" prop="type"></el-table-column>
        <el-table-column label="项目类型" prop="typeName"></el-table-column>

        <el-table-column label="费用状态" prop="status">
            <template #default="scope">
                <span v-if="scope.row.type == 'check'"> {{ translateCode2Name('CheckApplyStatus', scope.row.status)
                    }}</span>
                <span v-else> {{ translateCode2Name('InspectApplyStatus', scope.row.status) }}</span>
            </template>

        </el-table-column>

        <template #append>

            <el-button type="primary" @click="fee">收费</el-button>

            <div> 已选择的项目费用金额: {{ amount }}</div>

        </template>
    </el-table>





</template>